<template>
	<view class="backcorl">
		<view class="line"></view>
		<view class="balance">
			<view class="left">
				选择余额支付
			</view>
			<view class="right" @click="payBalances()">
				<image src="https://z3.ax1x.com/2021/04/26/gS5XlQ.png" mode=""></image>
				<view class="text">
					钱包 （剩余 ¥ {{userData.balance}} 元）
				</view>
			</view>
		</view>
		<view class="header">
			<view class="head1">选择银行卡支付</view>

			<view class="head2" v-for="item in card" :key="item.id" @click="payCard(item)">
				<view class="tiaoz">
					<image src="https://z3.ax1x.com/2021/04/25/cxHrUx.png" mode="" class="icon"></image>
					<text>{{item.type}}</text>
					<view class="number">●●● ●●● ●●● {{item.number}}</view>
				</view>
				<view class="delettext"><text @tap="deletCard(item.id)" class="detext">删除银行卡</text></view>
			</view>

			<view class="head3" @tap="addbank">
				<image src="https://z3.ax1x.com/2021/04/23/cXD1q1.png" mode=""></image>
				<text>添加银行卡</text>
			</view>
		</view>
		<view class="footer">
			<view class="">

			</view>
			<button type="default" @click="funds">确认支付{{theYuan}}.00</button>
		</view>
		<view class="jianpan">
			<passkeyborad :way=list :money=theYuan :show="showKeyBoard" @success="enterSuccess" @close="close">
			</passkeyborad>
		</view>
	</view>
</template>

<script>
	//倒入键盘插件

	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState: mapStates
	} = createNamespacedHelpers("current");
	const {
		mapState,
		mapActions
	} = createNamespacedHelpers('bankcard');
	const {
		mapState: userMapState,
		mapActions: mapActions3
	} = createNamespacedHelpers('UserInfor');
	const {
		mapActions: mapActions2
	} = createNamespacedHelpers('payCurrent');
	const {
		mapActions: mapActions4
	} = createNamespacedHelpers('gold') //黄金
	const {
			mapState:mapStateType,
			mapActions: mapActionsDatalis
		} = createNamespacedHelpers("details");
	export default {
		components: {
			passkeyborad
		},
		data() {
			return {
				//定义产品是什么  活期  定期  黄金
				chanping: '',
				//支付方式
				list: '',
				//键盘
				showKeyBoard: false,
				//购买金额
				theYuan: '',
				//支付建立订单 
				order: {

					// 活期 ------------------------------------------
					productName: '', //基金名字
					fundNum: '', //买入金额
					code: '', //基金代码
					id: '', //基金id
					name: '', //用户名
					bankCardId: '', //银行卡支付(如果是选择余额支付就不传)
					payType: '', //支付方式（银行卡还是余额）
					payPassword: '', //支付密码

					// 黄金-----------------------------------------
					// bankCardId: 0,    //银行卡id
					couponId: 0, //优惠卷
					grammage: 0, //  赎回克数
					money: 0, //金额
					// payType: "",   //支付方式
					proId: "1", //产品id
					pwd: "", //支付密码
					username: "", //用户名

					//定期-------------------------------------------
					memberName: "", //用户名
					modifiedPrice: "", //产品金额
					productId: "", //产品id
					productName: "", //产品名称
					productType: "", //定期
				}
			}
		},
		computed: {
			...mapState(['status', 'card']),
			...userMapState(['userData', 'userPass']),
			...mapStates(['pay']),
		},
		onLoad(option) {
			console.log(option);
			this.queryCardData({
				username: this.userData.username
			})
			this.theYuan = this.pay.fundNum
			this.chanping = option.chanping
			// this.getGold()
		},
		methods: {
			...mapActions2(['payCurrent']),
			...mapActions(['queryCardData', 'deleteCardData']),
			...mapActions3(['getUser']),
			...mapActions4(['addGoldList']),
			...mapActionsDatalis(["getBuyMonrys"]),
			//删除银行卡
			async deletCard(id) {
				const data = await this.deleteCardData({
					id: id
				})
				if (data.code == 200) {
					uni.showToast({
						title: '删除成功!',
						duration: 2000
					});
					this.queryCardData({
						username: this.userData.username
					})
				}

			},

			///添加银行卡
			addbank() {
				uni.navigateTo({
					url: '/pages/addBankCard/addBankCard'
				})
			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false;
			},
			//选择支付
			payBalances() {
				this.list = '余额'
				this.showKeyBoard = true
			},
			payCard(item) {
				this.list = '银行卡'
				this.showKeyBoard = true
				this.order.bankCardId = item.id //银行卡id
			},
			// 密码输入的回调
			async enterSuccess(password) {
				// console.log(111,password); // 输入的密码
				//定期---------------------------------------------
				const buyDetail = uni.getStorageSync("details");
				this.order.memberName= this.userData.username, //用户名
				this.order.modifiedPrice= this.pay.fundNum, //产品金额
				this.order.payPassword= password, //支付密码  银行卡密码
				this.order.productId= buyDetail.fid, //产品id
				this.order.productName= buyDetail.productName, //产品名称
				this.order.productType= buyDetail.productType, //定期
				this.order.payType= this.list //支付方式
				
				//活期------------------------------------------
				this.order.payPassword = password //支付密码
				this.order.payType = this.list //支付方式
				this.order.name = this.userData.username //用户名
				this.order.fundNum = this.pay.fundNum //购买总金额
				this.order.id = this.pay.id //购买的活期产品id
				this.order.code = this.pay.code //购买的活期产品code
				this.order.productName = this.pay.productName //购买的活期产品名字
				this.showKeyBoard = false; //隐藏键盘
				this.myPayCurrent() //跳转页面
				//黄金-------------------------------------------

				this.order.money = this.pay.fundNum //购买总金额
				this.order.pwd = password //支付密码
				this.order.username = this.userData.username //用户名

				
			},
			//密码输入后，跳转及生成订单
			async myPayCurrent() {
				console.log(this.chanping)
				if (this.chanping == '活期') {
					const data = await this.payCurrent(this.order)
					// console.log('结果', data);
					if (data.code == 200) {
						this.getUser({
							username: this.userData.username,
							password: this.userPass
						})
						uni.redirectTo({
							url: '/pages/funds/fundsBuy'
						});
					} else if (data.code == 607) {
						uni.showToast({
							title: '密码错误，请重新输入',
							duration: 2000,
							icon: "none"
						})
						this.showKeyBoard = true; //键盘弹出
					} else if (data.code == 600) {
						uni.showToast({
							title: '余额不足，请重新购买',
							duration: 2000,
							icon: "none"
						}, uni.navigateTo({
							//跳转活期列表
							url: '../current/current'
						}))
					} else {
						uni.showToast({
							title: '购买失败',
							duration: 2000,
							icon: "none"
						}, uni.navigateTo({
							//跳转财富页面
							url: "../fortune/fortune"
						}))
					}
				} else if (this.chanping == '黄金') {
					const data = await this.addGoldList(this.order)
					// console.log(data);
				} else if (this.chanping == '定期') {
					const data = await this.getBuyMonrys(this.order);
					// console.log(111, data);
					if (data.code == 200) {
						this.getUser({
							username: this.userData.username,
							password: this.userPass
						})
						uni.redirectTo({
							url: '/pages/funds/fundsBuy'
						});
					} else if (data.code == 607) {
						uni.showToast({
							title: '密码错误，请重新输入',
							duration: 2000,
							icon: "none"
						})
						this.showKeyBoard = true; //键盘弹出
					} else if (data.code == 600) {
						uni.showToast({
							title: '余额不足，请重新购买',
							duration: 2000,
							icon: "none"
						}, uni.navigateTo({
							//跳转定期列表
							url: '../regularDetail/regularDetail'
						}))
					} else {
						uni.showToast({
							title: '购买失败',
							duration: 2000,
							icon: "none"
						}, uni.navigateTo({
							//跳转财富页面
							url: "../fortune/fortune"
						}))
					}
				}
			},

			//点击付款
			funds() {
				uni.showToast({
					title: "请选择支付方式",
					duration: 2000,
					icon: "none",
				});
			}
		}

	}
</script>

<style>
	.balance {
		padding: 20rpx;
		height: 200rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.balance .left {
		height: 100rpx;
		line-height: 100rpx;
		color: #999999;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.balance .right {
		height: 100rpx;
		line-height: 115rpx;
		display: flex;
		align-items: center;
	}

	.balance .right image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 15rpx;
	}



	.footer {
		margin-top: 50rpx;
		background-color: #f5f5f5;
	}

	.footer button {
		width: 670rpx;
		margin-bottom: 50rpx;
		text-align: center;
		height: 88rpx;
		background: #3476f1;
		color: white;
	}

	.icon {
		margin-right: 20rpx;
	}

	.number {
		width: 100%;
		height: auto;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}

	.backcorl {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.line {
		height: 0rpx;
		border: 1rpx solid #000000;
		opacity: 0.03;
	}

	.backcorl .header {
		background-color: white;
		padding: 20rpx;
	}

	.head1 {
		height: 100rpx;
		line-height: 100rpx;
		color: #999999;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}

	.backcorl .header image {
		height: 30rpx;
		width: 30rpx;
	}

	.head2 {
		/* border: 1px solid red; */
		padding: 20rpx;
		height: 200rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
		border-radius: 25rpx;
		text-align: left;
		background: url("https://z3.ax1x.com/2021/04/25/cxIKTf.jpg") no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
	}

	.tiaoz {
		padding-bottom: 30rpx;
		/* border: 1px solid red; */
	}

	.head3 {
		height: 100rpx;
		line-height: 100rpx;
		margin: 10rpx auto;
		text-align: center;
	}

	.head3 image {
		margin-right: 20rpx;
	}

	.delettext {
		width: 100%;
		height: auto;
		text-align: right;
		color: #ffffff;
		font-size: 26rpx;
		/* border: 1px solid red; */
	}

	.detext {
		background-color: rgba(255, 255, 255, 0.1);
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
</style>
